import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { SixFouData } from '../Data'

import { useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect } from 'react'
import { useState } from 'react'
import { Video } from '../../../../Common/Configure/Video'

import { PageTopSelect } from '../Template'
import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

export const SixFou = () => {
    const [Camera, setCamera] = useState()
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => setCamera(res.list),
    })

    useEffect(() => {
        runAsync({ url: 'getCamera', data: { pageIndex: 1, pageSize: 5 } })
    }, [runAsync])

    const Top = [
        { uuid: 1, label: '位置', flex: 3 },
        { uuid: 2, label: '识别人数', flex: 2 },
        { uuid: 3, label: '识别明火', flex: 3 },
        { uuid: 4, label: '识别烟', flex: 2 },
        { uuid: 5, label: 'AI识别位置', flex: 2 },
    ]

    return (
        <CommonSmallTitle title="应急撤离">
            <div>{Camera && Camera.map(item => <Video key={item.uuid} data={item} />)}</div>
            <div>
                <div>
                    <img src={imageUrl + 'SixFou.png'} alt="" />
                    <div>AI火灾预警</div>
                    <div>AI预警位置：二楼机房</div>
                </div>
                <div>
                    <div>
                        {Top.map(({ uuid, label, flex }) => (
                            <div key={uuid} style={{ flex }}>
                                {label}
                            </div>
                        ))}
                    </div>
                    <div>
                        {SixFouData.map(({ uuid, one, two, thr, fou, fiv }) => (
                            <div key={uuid}>
                                <div style={{ flex: Top[0].flex }}>{one}</div>
                                <div style={{ flex: Top[1].flex }}>{two}</div>
                                <div style={{ flex: Top[2].flex }}>{thr}</div>
                                <div style={{ flex: Top[3].flex }}>{fou}</div>
                                <div style={{ flex: Top[4].flex }}>{fiv}</div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </CommonSmallTitle>
    )
}
